<template>
  <div class="box">
    <div class="condition">
      <div>时间查询</div>
      <div class="block">
        <el-date-picker class="picker" v-model="Data" value-format="yyyy-MM-dd HH:mm" type="datetimerange" align="right"
          start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
      <div>传感器类型</div>
      <div>
        <el-select v-model="Gzm" placeholder="请选择传感器类型" @change="typelist">
          <el-option v-for="item in options" :key="item.ID" :label="item.SensortypeType" :value="item.SensortypeType">
          </el-option>
        </el-select>
      </div>



      <div style="color: white; font-size: 14px;">安装位置</div>
      <div>
        <el-select v-model="WeiZhi" placeholder="请选择安装位置">
          <el-option v-for="item in WeiZhiList" :key="item.ID" :label="item.location" :value="item.location">
          </el-option>
        </el-select>
      </div>



      <div><el-button type="warning" @click="Query" style="margin-left: 5px;">查询</el-button></div>
      <!-- <div><el-button type="success" plain>重置</el-button></div> -->
      <div>
        <el-button style="
            background-color: rgb(40, 103, 185);
            border-color: rgb(40, 103, 185);
            color: white;
            margin-left: 7px;
          " size="max" class="el-icon-printer" @click="printJson">打印</el-button>
      </div>
      <div class="Export">
        <el-button type="success" style="
            color: white;
            margin-left: 7px;

            display: flex;
          " size="min" class="el-icon-printer" @click="Export(Gzm, Data)">
          <xslx ref="xslx" />导出
        </el-button>
      </div>

    </div>
    <div class="Tbale">
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :header-cell-style="{
          background: 'rgb(40,103,185)',
          color: 'white',
          borderColor: 'rgb(43,88,144)',
          'text-align': 'center',
        }" :cell-style="{ 'text-align': 'center' }" height="300" style="width: 100%; padding: 0; height: 300px">
        <el-table-column prop="location" label="安装位置" width="500"> </el-table-column>
        <el-table-column prop="Avgvalue" label="测点数值"> </el-table-column>
        <el-table-column prop="unit" label="测点单位"> </el-table-column>
        <el-table-column prop="state" label="测点状态"> </el-table-column>
        <el-table-column prop="time" label="刷新时间" width="200"> </el-table-column>
        <!-- <el-table-column prop="Info" label="总结" width=""> </el-table-column> -->
      </el-table>
      <div class="block1" style="width:100%; height: 70px; text-align: right">
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
          :current-page="currentPage4" :page-sizes="[pageSize]" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <div id="echart">
      <div id="TwoEcharts" style="width: 100%; height: 360px; margin-top: 20px"></div>
    </div>
    <el-dialog class="dialog" title="预览" @open="handleDialogOpen" :visible.sync="StaticBoard" width="80%">
      <div style=" width: 100%; display: flex; justify-content: flex-end">
        <el-button v-print="printViewInfo" type="primary">打 印</el-button>
        <el-button @click="StaticBoard = false">取 消</el-button>
      </div>
      <div id="printView">
        <div style="page-break-after:always" class="box">
          <div id="TwoEcharts1" style="width: 1200px; height: 300px; margin: 0 auto;"> </div>
          <div class="table" style="margin-top: 20px;">
            <table id="printable-table" style="width: 95%;margin: 0 auto; border-collapse: collapse;">
              <thead>
                <tr>
                  <th style="padding: 5px 10px; border: 1px solid #333;">安装位置</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">测点数值</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">计量单位</th>
                  <th style="padding: 5px 10px; border: 1px solid #333; width: 100px;">测点状态</th>

                  <th style="padding: 5px 10px; border: 1px solid #333;width: 100px;">时间</th>
                  <th style="padding: 5px 10px; border: 1px solid #333;width: 100px;">总结</th>
                  <!-- 其他表头 -->
                </tr>

              </thead>
              <tbody>
                <!-- 表格数据行 -->
                <tr v-for="(item, index) in tableData" :key="index">
                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.location
                    }}</td>
                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.Avgvalue
                    }}</td>
                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.unit
                    }}</td>

                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.state
                    }}</td>



                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95);  text-align: center;">
                    {{ item.time
                    }}</td>

                  <td style="padding: 5px 10px; border: 1px solid rgb(70,98,95); width: 20%; text-align: center;">
                    {{ item.Info
                    }}</td>
                  <!-- 其他数据 -->
                </tr>

              </tbody>
            </table>
          </div>
          <div class="sign">

            <div>
              <div>操作人签字：</div>
              <div></div>
            </div>

            <div>
              <div>审核人签字：</div>
              <div></div>
            </div>


            <div>
              <div>负责人签字：</div>
              <div></div>
            </div>



          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
       
        <el-button v-print="printViewInfo" type="primary">打 印</el-button>
        <el-button @click="StaticBoard = false">取 消</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import bus from "../../components/bus";
import * as echarts from "echarts";
import xslx from "../../components/xslx.vue";
import {
  dingbanlishixinxiType,
  dingbanbaojingbaojingType,
  dingbanshebeichuanganqipeizhilist,
  dingbanlishixinxiTypefanhuiweizhi,
  dingbanlishixinxiScChaWeiZhi,
  TypeHuoQuAnZhuangJiDian,
  lishixinxiChaWeiZhi

} from "../../https/api/user";
export default {
  components: { xslx },
  data() {
    return {
      StaticBoard: false,
      msg: "打印",
      printViewInfo: {
        id: "printView", //打印区域的唯一的id属性
        popTitle: '日报表打印', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
        extraHead: '', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
        previewTitle: '', // 打印预览的标题(预览模式preview为true时才显示)
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback(that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
        previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
        beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      },
      pageSize: 10,
      currentPage: 1,
      currentPage4: 1,
      Gzm: "",
      WeiZhi: "",
      Data: "",
      WeiZhiList: [],
      options: [],
      tableData: [],
      data1: [],
      dataValue: [],
      ZheXianDanWei: '',

      Baojing: '',
      Yujing: '',

      scList: [

      ],
      baoGaoText: ''

    };
  },
  mounted() {
    this.lishiType();
    this.initChartTwo()
  },

  methods: {

    async typelist() {
      const data = {
        type: this.Gzm
      }
      const res = await lishixinxiChaWeiZhi(data)
      console.log(res, '根据传感器类型返回传感器编号');
      this.WeiZhiList = res
    },

    handleSizeChange1(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    handleSizeChange(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    lishiType() {

      const data = {
        w: 1,
      };
      dingbanshebeichuanganqipeizhilist(data).then((res) => {
        console.log("传感器类型", res);
        if (res) {
          this.options = res;
        }
      });
    },
    leixing() {

      const data = {
        SensorType: this.Gzm
      }
      dingbanlishixinxiTypefanhuiweizhi(data).then(res => {
        console.log('根据传感器类型 返回传感器安装位置', res);
        this.WeiZhiList = res
      })
    },
    Query() {
      const data = {
        Starttime: this.Data[0],
        Edntime: this.Data[1],
        type: this.Gzm,
        factoryNum: this.WeiZhi,
      };
      console.log(data);
      dingbanlishixinxiType(data).then((res) => {
        console.log("历史信息", res);
        if (res) {
          this.tableData = res[0].Exceldat;
          this.data1 = res[0].ZhuZhuangT.map(i => i.location)
          this.dataValue = res[0].ZhuZhuangT.map(i => i.max)
          this.ZheXianDanWei = res[0].unit
          this.Yujing = res[0].Yujing
          this.Baojing = res[0].Baojing
          this.baoGaoText = res[0].AlarmInfo

        }
        this.initChartTwo();
      });


    },
    initChartTwo() {
      var option = {
        legend: {
          // data: ["深基点", "浅基点"],
          textStyle: {
            color: [],
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: 35,
          left: 70,
          right: 60,
          bottom: 45,
        },

        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          name: "",
          type: "category",
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#87CEFA",
            },
          },
          axisLabel: {
            rotate: 0, //代表逆时针旋转
          },
          data: this.data1,
        },
        dataZoom: [
          {
            type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
            show: true, //开启
            xAxisIndex: [0], //Y轴滑动
            //  xAxisIndex: [0],//X轴滑动
            startValue: 0, // 从头开始。
            endValue: 9,  // 最多5个
            handleSize: 0,
            showDataShadow: false
          },
        ],
        yAxis: [
          {
            type: 'value',
          

          },
         
        ],

        series: [
          {
            data: this.dataValue,
            type: "bar",
            barWidth: '10%', // 设置柱子的宽度为相对于类目宽度的 50%
            markLine: {
              symbol: ["none", "none"], // 去掉箭头
              label: {
                show: false,
                position: "start",
                formatter: "{a}-{b}-{c}",
              },
              data: [
                {
                  name: "报警线",
                  yAxis: this.Baojing,
                  lineStyle: {
                    color: "#f33",
                    type: "solid",
                    width: 5,
                  },
                },
                {
                  name: "预警线",
                  yAxis: this.Yujing,
                  lineStyle: {
                    color: "yellow",
                    type: "solid",
                    width: 5,
                  },
                },
              ],
            },
          },
          {
            data: this.dataValue,
            type: "line",
            label: { show: true },
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            // symbol: "none",
            // 设置折线弧度，取值：0-1之间
            // smooth: 0.5,
          },


        ],

        color: ["rgb(242,148,85)", "rgb(83,221,249)"],
      };
      const myChart = echarts.init(document.getElementById("TwoEcharts"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    produceRadioo() {
      var option = {
        legend: {
          // data: ["深基点", "浅基点"],
          textStyle: {
            color: [],
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: 35,
          left: 70,
          right: 30,
          bottom: 35,
        },

        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          name: "",
          type: "category",
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#87CEFA",
            },
          },
          axisLabel: {
            rotate: -15, //代表逆时针旋转
          },
          data: this.data1,
        },
        dataZoom: [
          {
            type: "inside", //无滑动条内置缩放   type: 'slider', //缩放滑动条
            show: true, //开启
            xAxisIndex: [0], //Y轴滑动
            //  xAxisIndex: [0],//X轴滑动
            start: 0, //初始化时，滑动条宽度开始标度
            end: 5, //初始化时，滑动条宽度结束标度
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 100

          },
          {
            type: 'value',
            min: 0,
            // interval: 5,
          }
        ],

        series: [
          {
            data: this.dataValue,
            type: "bar",
            barWidth: '10%', // 设置柱子的宽度为相对于类目宽度的 50%
            markLine: {
              symbol: ["none", "none"], // 去掉箭头
              label: {
                show: false,
                position: "start",
                formatter: "{a}-{b}-{c}",
              },
              data: [
                {
                  name: "报警线",
                  yAxis: this.Baojing,
                  lineStyle: {
                    color: "#f33",
                    type: "solid",
                    width: 5,
                  },
                },
                {
                  name: "预警线",
                  yAxis: this.Yujing,
                  lineStyle: {
                    color: "yellow",
                    type: "solid",
                    width: 5,
                  },
                },
              ],
            },
          },
          {
            data: this.dataValue,
            type: "line",
            label: { show: true },
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            // symbol: "none",
            // 设置折线弧度，取值：0-1之间
            // smooth: 0.5,
          },


        ],

        color: ["rgb(242,148,85)", "rgb(83,221,249)"],
      };
      const myChart = echarts.init(document.getElementById("TwoEcharts1"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    Export() {
      bus.$emit("leixing", this.Gzm, this.Data);
      const data = [
        [
          "安装位置",
          "测点数值",
          "测点单位",
          "测点状态",
          "刷新时间",
        ],
      ];
      this.tableData.forEach((item) => {
        data.push([
          item.location,
          item.Avgvalue,
          item.unit,
          item.state,
          item.time,
        ]);
      });

      this.$refs.xslx.xslx(data);
    },
    printJson() {
      this.StaticBoard = true
      if (!this.WeiZhi) {
        this.$message.error('查询时，请选择传感器编号');
      } else {
        const data = {
          Starttime: this.Data[0],
          Edntime: this.Data[1],
          type: this.Gzm,
          factoryNum: this.WeiZhi,

        };
        dingbanlishixinxiType(data).then((res) => {
          console.log("历史信息", res);
          if (res) {
            this.tableData = res[0].Exceldat;
            this.data1 = res[0].ZhuZhuangT.map(i => i.location)
            this.dataValue = res[0].ZhuZhuangT.map(i => i.max)
            this.ZheXianDanWei = res[0].unit
            this.Yujing = res[0].Yujing
            this.Baojing = res[0].Baojing
            this.baoGaoText = res[0].AlarmInfo

          }
          this.initChartTwo();
        });
      }

    },
    handleDialogOpen() {
      //dom完全挂载后调用
      this.$nextTick(() => {
        this.produceRadioo()
      })

    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  padding: 0 20px;

  .condition {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;

    >div:nth-child(1) {
      color: white;
      font-size: 14px;
    }

    >div:nth-child(2) {
      margin-left: 7px;
    }

    >div:nth-child(3) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }

    >div:nth-child(4) {
      margin-left: 7px;
    }

    >div:nth-child(5) {
      color: white;
      font-size: 14px;
      margin-left: 7px;
    }

    >div:nth-child(6) {
      margin-left: 7px;
    }

    >div:nth-child(7) {
      margin-left: 7px;
    }

    >div:nth-child(8) {
      margin-left: 7px;
    }
  }

  .Table {
    width: 100%;
    height: 750px;
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

::v-deep .el-table th>.cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}

.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

::v-deep .el-form-item__label {
  color: white !important;
}

.picker {
  height: 40px;
  background-color: rgb(14, 26, 55);

  ::v-deep .el-range-input {
    background-color: rgb(14, 26, 55);
  }
}

::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: rgb(46, 95, 152);
}
</style>